{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/mobile_touch_swipe_indicator/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"975e7b0a-95d3-507f-8043-4c057ad27b97","excerpt":"ISSUE 캐러셀 UI에서 20개의 item을 보여야함 추가적인 item은 오른쪽 스와이핑 액션을 통해 해당 페이지로 넘어가야함 touchmove(스와이핑)이벤트가 발생해는 x값에 따라 퍼센테이지를 UI로 제공 해결 방안 item의 개수가 20개 이상일 때에만 swipe indicator를 보여주기 위한 filtering을 한다. event를 감지해서 스크롤이 끝에 도달할 경우 이벤트를 전파한다. 끝에 도달할 경우, touchStartX시점에서 touchmove의 이동량을 계산하여 xDiff…","html":"

ISSUE

\n\n

해결 방안

\n\n
ngAfterViewInit() {\n    this._sub.push(\n      this.result$.pipe(\n        tap(result => this.result = result),\n        filter((result) => result && result.total > result.listNum),\n        switchMap(() => this.swipeToSeeMore())\n      ).subscribe()\n    );\n  }
\n\n
private swipeToSeeMore() {\n    const element = this.elementRef.nativeElement;\n    const circle = this.circle.nativeElement;\n    let reqId, percentage, touchStartX;\n\n    return combineLatest([\n      fromEvent(element, 'touchmove', { passive: true }).pipe(\n        filter(() => {\n          const { scrollWidth, scrollLeft, clientWidth } = element;\n          return scrollWidth - scrollLeft - clientWidth <= 0;\n        }),\n        map((touchMove: TouchEvent) => touchMove.changedTouches[0].clientX),\n        tap((x) => touchStartX = touchStartX || x),\n        tap((x) => {\n          // 디바이스 가로폭 40%까지만 swipe 하면 100%\n          const xThreshold = element.clientWidth * 0.4;\n          const xDiff = touchStartX - x;\n          percentage = Math.min(xDiff, xThreshold) / xThreshold;\n          reqId = cancelAndRequestAnimationFrame(reqId, () => {\n\t\t\t\t\t\t// transform을 이용해 안드로이드 디바이스에서도 스와이핑이 되게 구현\n            element.style.transform = `translateX(-${xDiff / 2}px)`;\n            circle.style.strokeDasharray = `${Math.round(percentage * 100)}, 100`;\n          });\n        })\n      ),\n      fromEvent(element, 'touchend', { passive: true }).pipe(\n        tap(() => {\n          if (percentage >= 1) {\n            this.router.navigate(this.navigateUrl);\n          } else {\n            reqId = cancelAndRequestAnimationFrame(reqId, () => {\n              element.style.transform = `translateX(0px)`;\n              circle.style.strokeDasharray = `0, 100`;\n            });\n          }\n          touchStartX = 0;\n        })\n      )\n    ]);\n  };
\n

이 밖에도 strokeDasharray, requestAnimationFrame 등 이 기능을 구현 및 최적화하기 위해 알아야할 지식들이 있다. 참고할 문서들이 많으니 링크로 남겨 놓겠다.

\n

결과 화면

\n\n
\n

참고 및 출처

\n\n
","frontmatter":{"title":"Mobile Touch Swipe Indicator","date":"June 25, 2020"}}},"pageContext":{"slug":"/Today I Learned/mobile_touch_swipe_indicator/","previous":{"fields":{"slug":"/Today I Learned/full_height_on_mobile_web/"},"frontmatter":{"title":"Full Height On mobile Web","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/Parent_element에_click이_발생할_때_Child_element의_클릭이벤트를_제어하기/"},"frontmatter":{"title":"Parent element에 click이 발생할 때 child element의 클릭이벤트를 제어하기","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}